<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单确认</title>
    <link rel="stylesheet" href="/css/Order.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js"
        integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <div class="header-container">
            <h1>NaiLong Store</h1>
            <label>
                <input type="text" placeholder="请输入商品名称">
            </label>
            <button>搜索</button>
        </div>
    </header>

    <main>
        <div class="breadcrumb">
            <p>NaiLongStore &gt; 订单确认</p>
        </div>

        <section class="address-section">
            <h2>收货地址</h2>
            <div class="address-grid" id="addressListContainer">
                <!-- JS 动态插入 -->
            </div>
            <!-- 模态框 -->
            <div id="addAddressModal"
                style="display: none; position: fixed; z-index: 9; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
                <div
                    style="background-color: #fff; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 400px; border-radius: 10px; position: relative;">
                    <span class="close"
                        style="color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; right: 15px; top: 10px; cursor: pointer;">&times;</span>
                    <h2 style="text-align: center;">添加新地址</h2>
                    <form id="addAddressForm">
                        <label for="province">省：</label>
                        <input type="text" id="province" name="province" required
                            style="width: 100%; padding: 8px; margin: 5px 0;"><br>
                        <label for="city">市：</label>
                        <input type="text" id="city" name="city" required style="width: 100%; padding: 8px; margin: 5px 0;"><br>
                        <label for="district">区：</label>
                        <input type="text" id="district" name="district" required
                            style="width: 100%; padding: 8px; margin: 5px 0;"><br>
                        <label for="detailAddress">详细地址：</label>
                        <input type="text" id="detailAddress" name="detailAddress" required
                            style="width: 100%; padding: 8px; margin: 5px 0;"><br>
                        <label for="phoneNumber">电话：</label>
                        <input type="text" id="phoneNumber" name="phoneNumber" required
                            style="width: 100%; padding: 8px; margin: 5px 0;"><br>
                        <label for="receiverName">收件人姓名：</label>
                        <input type="text" id="receiverName" name="receiverName" required
                            style="width: 100%; padding: 8px; margin: 5px 0;"><br>
                        <label style="display: block; margin: 10px 0;">
                            <input type="checkbox" id="isDefault" name="isDefault">
                            设为默认地址
                        </label>
                        <button type="submit"
                            style="width: 100%; padding: 10px; background-color: orange; color: white; border: none; border-radius: 5px; cursor: pointer;">
                            确认
                        </button>
                    </form>
                </div>
            </div>

        </section>

        <section class="order-summary">
            <h2>商品详情</h2>
            <table class="orderTable">
                <thead>
                    <tr>
                        <th>商品描述</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>小计</th>
                    </tr>
                </thead>
                <tbody id="cartItemsBody">
                    <!-- JS 渲染插入 -->
                </tbody>
            </table>

            <div class="total-container">
                <span class="total-text">订单总价：</span>
                <span class="price"></span>
                <span class="changed"><button class="submit-order" id="submitItem">提交订单</button></span>
            </div>
        </section>
    </main>

    <!-- 鼠标跟随图标 -->
    <div class="mouse-follow-icon" id="mouse-follow-icon"
        style="display: inline-flex; align-items: center; justify-content: center;">
        <img src="../images/cursor.gif" alt="跟随鼠标的GIF" />
    </div>
</body>

</html>